﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Common.js" type="text/javascript"></script>
    <script type="text/javascript">

        BindEvent(window, "load", function (e) {

            /*
            var tab = Get("tabTest");
            tab.caption.innerHTML = "改变";
            //alert(tab.tHead.rows[0].cells[1].innerHTML);
            //alert(tab.rows[0].cells[1].innerHTML);
            //alert(tab.tBodies[0].rows[0].cells[1].innerHTML);
            //alert(tab.tBodies[0].rows[0].rowIndex);
            alert(tab.tBodies[0].rows[0].cells[1].cellIndex);
            //tab.tFoot.....
            */
            // 点击 计算平均年龄
            var tab = Get("tabTest");
            var tBodyRows = tab.tBodies[0].rows;
            BindEvent("btnAvg", "click", function (e) {

                //var inpArr = Get("tabTest").getElementsByTagName("INPUT");

                var sum = 0;
                var count = 0;
                for (var i = 0; i < tBodyRows.length; i++) {
                    // 此行是否被选中
                    /*
                    if (inpArr[i + 1].checked) {
                    count++;
                    sum += tBodyRows[i].cells[3].innerHTML * 1;
                    }
                    */
                    var cbx = tBodyRows[i].cells[0].children[0];
                    if (cbx.checked) {
                        count++;
                        sum += tBodyRows[i].cells[3].innerHTML * 1;
                    }

                }
                var avgAge = Math.round(sum / count);
                //alert(avgAge);

                tab.tFoot.rows[0].cells[3].innerHTML = avgAge;

            });


            //点击序号 提示人员信息

            for (var i = 0; i < tBodyRows.length; i++) {
                var tdNo = tBodyRows[i].cells[1];
                var trPerson = tdNo.parentNode;
                //                trPerson.PersonInfo = new Object();
                //                trPerson.PersonInfo.Name = trPerson.cells[2].innerHTML;
                //                trPerson.PersonInfo.Age = trPerson.cells[3].innerHTML; ;
                //                trPerson.PersonInfo.Sex = "男";
                // 给元素附加属性
                trPerson.PersonInfo = { "Name": trPerson.cells[2].innerHTML, "Age": trPerson.cells[3].innerHTML, "Sex": "男" };
                // 闭包
                BindEvent(tdNo, "click", function (e) {
                    //alert("test");
                    //alert(tBodyRows[i].cells[2].innerHTML);
                    var ele = GetEventSrcElement(e);
                    var tr = ele.parentNode;
                    //方式1
                    //alert("姓名:" + tr.cells[2].innerHTML + " 年龄:" + tr.cells[3].innerHTML);
                    //方式2
                    alert("姓名:" + tr.PersonInfo.Name + " 年龄:" + tr.PersonInfo.Age + " 性别:" + tr.PersonInfo.Sex);
                });
            }

        });

        function OnClickPersonNo(e) {
            alert("test");
            //tab  
        }

        function AddData() {
            Get("divTest").TestData = Get("txtTest").value;
        }

        function ShowData() {
            alert(Get("divTest").TestData);
        }
        
    
    </script>
</head>
<body>
    <div id="divTest"></div>
    <input id="txtTest" type="text" />
    <input id="btnAdd" type="button" value="Add" onclick="AddData();" />
    <input id="btnShow" type="button" value="Show" onclick="ShowData();"  />
    <table id="tabTest" border="1">
        <caption>
            示例表</caption>
        <col />
        <colgroup>
            <col />
            <col />
            <col />
        </colgroup>
        <thead>
            <tr>
                <th>
                    <input type="checkbox" />
                </th>
                <th>
                    序号
                </th>
                <th>
                    姓名
                </th>
                <th>
                    年龄
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>&nbsp;&nbsp;&nbsp;
                    <input type="checkbox" />
                </td>
                <td>
                    1
                </td>
                <td>
                    张三
                </td>
                <td>
                    19
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    2
                </td>
                <td>
                    里斯
                </td>
                <td>
                    20
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    3
                </td>
                <td>
                    王五
                </td>
                <td>
                    16
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" />
                </td>
                <td>
                    4
                </td>
                <td>
                    赵六
                </td>
                <td>
                    10
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
                <td>
                </td>
            </tr>
        </tfoot>
    </table>
    <input id="btnAvg" type="button" value="平均年龄" />
</body>
</html>
